<!DOCTYPE html>
<html>

<head>
    <title data-i18n="options_title"></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="options.css">
</head>

<body>
    <div id="updatebox">
        <h1 style="margin-top: 0px" data-i18n="options_update_header"></h1>
        <p id="updatetext"></p>
        <button id="update" data-i18n="options_update_go"></button>
        <button id="noupdate" data-i18n="options_update_no"></button>
    </div>

    <div id="ratebox">
        <h1 style="margin-top: 0px" data-i18n="options_promo_header"></h1>
        <p data-i18n="options_promo_body"></p>
        <ul>
            <li data-i18n="options_promo_l1"></li>
            <li data-i18n="options_promo_l2"></li>
            <li data-i18n="options_promo_l3"></li>
        </ul>
        <p data-i18n="options_promo_end"></p>
        <button id="rate" data-i18n="options_promo_rate"></button>
        <button id="norate" data-i18n="options_promo_norate"></button>
    </div>

    <div id="feedbackbox">
        <h1 style="margin-top: 0px" data-i18n="options_feedback_header"></h1>
        <p data-i18n="options_feedback_reason"></p>
        <button id="feedback-yes" data-i18n="options_feedback_yes"></button>
        <button id="feedback-no" data-i18n="options_feedback_no"></button>
    </div>

    <h1 style="margin-top: 0px" data-i18n="options_video_header"></h1>
    <p data-i18n="options_video_body"></p>
    <datalist id="snap-hundred">
        <option value="100">
    </datalist>
    <datalist id="snap-zero">
        <option value="0">
    </datalist>

    <div class="video-option" data-option="videoDelay" data-unit="ms" data-multiplier="1">
        <div class="label" data-i18n="options_video_delay"></div>
        <input class="number" type="text" data-i18n-label="options_video_delay"></input>
        <input class="range" type="range" min="-1000" max="1000" value="0" step="1" list="snap-zero"
            data-i18n-label="options_video_delay"></input>
    </div>

    <div class="video-option" data-option="videoBrightness">
        <div class="label" data-i18n="options_video_brightness"></div>
        <input class="number" type="text" data-i18n-label="options_video_brightness"></input>
        <input class="range" type="range" min="0" max="200" value="100" step="1" list="snap-hundred"
            data-i18n-label="options_video_brightness"></input>
    </div>


    <div class="video-option" data-option="videoContrast">
        <div class="label" data-i18n="options_video_contrast"></div>
        <input class="number" type="text" data-i18n-label="options_video_contrast"></input>
        <input class="range" type="range" min="0" max="200" value="100" step="1" list="snap-hundred"
            data-i18n-label="options_video_contrast"></input>
    </div>


    <div class="video-option" data-option="videoSaturation">
        <div class="label" data-i18n="options_video_saturation"></div>
        <input class="number" type="text" data-i18n-label="options_video_saturation"></input>
        <input class="range" type="range" min="0" max="200" value="100" step="1" list="snap-hundred"
            data-i18n-label="options_video_saturation"></input>
    </div>


    <div class="video-option" data-option="videoGrayscale">
        <div class="label" data-i18n="options_video_grayscale"></div>
        <input class="number" type="text" data-i18n-label="options_video_grayscale"></input>
        <input class="range" type="range" min="0" max="100" value="0" step="1"
            data-i18n-label="options_video_grayscale"></input>
    </div>

    <div class="video-option" data-option="videoSepia">
        <div class="label" data-i18n="options_video_sepia"></div>
        <input class="number" type="text" data-i18n-label="options_video_sepia"></input>
        <input class="range" type="range" min="0" max="100" value="0" step="1"
            data-i18n-label="options_video_sepia"></input>
    </div>

    <div class="video-option" data-option="videoInvert">
        <div class="label" data-i18n="options_video_invert"></div>
        <input class="number" type="text" data-i18n-label="options_video_invert"></input>
        <input class="range" type="range" min="0" max="100" value="0" step="1"
            data-i18n-label="options_video_invert"></input>
    </div>

    <div class="video-option" data-option="videoHueRotate" data-unit="°" data-multiplier="1">
        <div class="label" data-i18n="options_video_hue"></div>
        <input class="number" type="text" data-i18n-label="options_video_hue"></input>
        <input class="range" type="range" min="0" max="360" value="0" step="1"
            data-i18n-label="options_video_hue"></input>
    </div>

    <div class="option grid2" style="margin-top: 5px">
        <div class="label" data-i18n="options_video_daltonizer_type" style="margin-left: 0px"></div>
        <div class="select" id="daltonizerType" data-i18n-label="options_video_daltonizer_type"></div>
    </div>

    <div id="daltonizerStrength" class="video-option" data-option="videoDaltonizerStrength" style="margin-top: 5px">
        <div class="label" data-i18n="options_video_daltonizer_strength"></div>
        <input class="number" type="text" data-i18n-label="options_video_daltonizer_strength"></input>
        <input class="range" type="range" min="0" max="100" value="0" step="1"
            data-i18n-label="options_video_daltonizer_strength"></input>
    </div>

    <h1 data-i18n="options_general_header"></h1>
    <div class="option grid1">
        <input type="checkbox" id="downloadall" data-i18n-label="options_general_predownload">
        <div class="label" data-i18n="options_general_predownload"></div>
    </div>

    <div class="option grid2" style="margin-left: 25px">
        <div class="label" data-i18n="options_general_targetspeed"></div>
        <input class="number" type="text" id="maxspeed" data-i18n-label="options_general_targetspeed"></input>
    </div>

    <div class="option grid2" style="margin-left: 25px; margin-top: 3px">
        <div class="label" data-i18n="options_general_maxsize"></div>
        <input class="number" type="text" id="maxsize" data-i18n-label="options_general_maxsize"></input>
    </div>

    
    <br>

    <div class="option grid1">
        <input type="checkbox" id="autoplaynext" data-i18n-label="options_general_autoplaynext">
        <div class="label" data-i18n="options_general_autoplaynext"></div>
    </div>

    <br>

    <div class="option grid1">
        <input type="checkbox" id="autoplayyt" data-i18n-label="options_general_autoplayyt">
        <div class="label" data-i18n="options_general_autoplayyt"></div>
    </div>

    <br>

    <div class="option grid1">
        <input type="checkbox" id="storeprogress" data-i18n-label="options_general_storeprogress">
        <div class="label" data-i18n="options_general_storeprogress"></div>
    </div>
    
    <br>

    <div class="option grid1">
        <input type="checkbox" id="previewenabled" data-i18n-label="options_general_previewenabled">
        <div class="label" data-i18n="options_general_previewenabled"></div>
    </div>

    <br>

    <div class="option grid1">
        <input type="checkbox" id="autosub" data-i18n-label="options_general_autosub">
        <div class="label" data-i18n="options_general_autosub"></div>
    </div>

    <br>

    <div class="option grid1">
        <input type="checkbox" id="analyzevideos" data-i18n-label="options_general_analyze">
        <div class="label" data-i18n="options_general_analyze"></div>
    </div>

    <br>

    <div class="option grid1">
        <input type="checkbox" id="playstreamurls" data-i18n-label="options_general_stream">
        <div class="label" data-i18n="options_general_stream"></div>
    </div>

    <br>

    <div class="option grid1">
        <input type="checkbox" id="playmp4urls" data-i18n-label="options_general_mp4">
        <div class="label" data-i18n="options_general_mp4"></div>
    </div>

    <br>

    <div class="option grid2">
        <div class="label" data-i18n="options_general_quality"></div>
        <div class="select" id="quality" data-i18n-label="options_general_quality"></div>
    </div>

    <br>

    <div class="option grid2">
        <div class="label" data-i18n="options_general_vischangeaction"></div>
        <div class="select" id="vischangeaction" data-i18n-label="options_general_vischangeaction"></div>
    </div>

    <div id="showWhenMiniSelected" style="display: none;">
        <br>

        <div class="option grid2">
            <div class="label" data-i18n="options_general_minipos"></div>
            <div class="select" id="minipos" data-i18n-label="options_general_minipos"></div>
        </div>

        <br>

        <div class="option grid2">
            <div class="label" data-i18n="options_general_minisize"></div>
            <input class="number" type="number" id="minisize" step="0.1"
                data-i18n-label="options_general_minisize"></input>
        </div>
    </div>
    <br>

    <div class="option grid2">
        <div class="label" data-i18n="options_general_clickaction"></div>
        <div class="select" id="clickaction" data-i18n-label="options_general_clickaction"></div>
    </div>

    <br>

    <div class="option grid2">
        <div class="label" data-i18n="options_general_dblclickaction"></div>
        <div class="select" id="dblclickaction" data-i18n-label="options_general_dblclickaction"></div>
    </div>

    <br>

    <div class="option grid2">
        <div class="label" data-i18n="options_general_tplclickaction"></div>
        <div class="select" id="tplclickaction" data-i18n-label="options_general_tplclickaction"></div>
    </div>

    <br>

    <div class="option grid2">
        <div class="label" data-i18n="options_general_seekstep"></div>
        <input class="number" type="number" id="seekstepsize" step="1" data-i18n-label="options_general_seekstep"></input>
    </div>

    <br>

    <div class="option grid2">
        <div class="label" data-i18n="options_general_replace_delay"></div>
        <input class="number" type="number" id="replacedelay" step="1" data-i18n-label="options_general_replace_delay"></input>
    </div>

    <div id="dev" style="display: none;">
        <br>
        <div class="option grid2">
            <div class="label" data-i18n="options_general_ytclient"></div>
            <div class="select" id="ytclient" data-i18n-label="options_general_ytclient"></div>
        </div>

        <br>

        <div class="option grid2">
            <div class="label">Max downloaders (browsers limit to 6)</div>
            <input class="number" type="number" id="maxdownloaders" step="1"></input>
        </div>
    </div>
   


    <h1 data-i18n="options_keybinds_header"></h1>
    <p data-i18n="options_keybinds_body"></p>
    <button id="resetdefault" data-i18n="options_keybinds_reset"></button>
    <div>

    </div>
    <div id="keybindslist"></div>

    <h1 data-i18n="options_autourl_header"></h1>
    <p data-i18n="options_autourl_body"></p>
    <p><span data-i18n="options_autourl_hint"></span> <a target="_blank" rel="noopener noreferrer"
            href="https://regex101.com/">Regex101</a></p>
    <textarea id="autoEnableURLs" data-i18n-label="options_autourl_body"></textarea>

    <h1 data-i18n="options_pattern_header"></h1>
    <p>
        <span data-i18n="options_pattern_body"></span> <a target="_blank" rel="noopener noreferrer"
        href="https://github.com/Andrews54757/FastStream/wiki/Custom-Source-Patterns">Learn more</a>
    </p>
    <textarea id="customSourcePatterns" data-i18n-label="options_pattern_body"></textarea>

    <h1 data-i18n="options_export_header"></h1>

    <button id="import" data-i18n="options_import"></button>
    <button id="export" data-i18n="options_export"></button>

    <h1 data-i18n="options_help_header"></h1>

    <div id="version"></div>
    <br>

    <a href="#" id="welcome" target="_blank" data-i18n="options_help_welcome"></a><br><br>
    <a href="https://github.com/Andrews54757/FastStream/issues" target="_blank" data-i18n="options_help_issues"></a><br><br>
    <a href="https://docs.google.com/forms/d/e/1FAIpQLSfA3T8lmhKO_ih028cP0m67vhH-FaGNkeHE0EsQoyBWztpctA/viewform?usp=sf_link" target="_blank" data-i18n="options_help_feedback"></a>

    <script src='../i18n.mjs' charset="UTF-8" type="module"></script>
    <script src='options.mjs' type="module"></script>

</body>

</html>